<template>
	<view class="">
		<cu-custom isLeft :bgColor="scrollTop>CustomBar?'var(--primaryBg)':''">
			<view slot="left" class="head-left">
				<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/logo.png" mode=""></image>
			</view>
		</cu-custom>
		<view class="bg"></view>
		<view class="box" style="padding-bottom: 20rpx;">
			<view class="swiper-box">
				<swiper class="swiper" @change="changeSwiper" :current="swiperIndex" circular :autoplay="true">
					<swiper-item @click="toPage(item.path)" v-for="(item,index) in carousels" :key="index"
						class="swiper-item">
						<view class="swiper-view">
							<image :src="item.picture" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
				<view class="swiper-indicator">
					{{swiperIndex+1}}/{{carousels.length}}
				</view>
			</view>
			<!-- 金刚区 -->
			<shortcutBox ref="shortcutBox" :list="tabList">
			</shortcutBox>
			<!-- 宠物 -->
			<view v-if="showInfor" class="">
				<view class="pet-title">
					<view class=""></view>
					<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/home-1.png" mode=""></image>
				</view>
				<homePet ref="homePet"></homePet>
			</view>
			<!-- 明星推荐 -->
			<view v-if="recommendPet.length" class="pet-title">
				<view class=""></view>
				<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/home-2.png" mode=""></image>
			</view>
			<view @click="toPage(`/pagesPet/pages/leaflet/detail?id=${item.id}`)" v-for="(item,index) in recommendPet"
				:key="index" class="authentication">
				<view class="authentication-img">
					<image class="host" :src="item.picture" mode=""></image>
					<image class="icon" src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/renzheng.png" mode="">
					</image>
				</view>
				<view class="authentication-title">
					{{item.title}}
				</view>
			</view>
			<!-- 认证 -->
			<view v-if="cargoApplyList.length" class="pet-title">
				<view class=""></view>
				<image style="width: 168rpx;" src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/home-3.png" mode="">
				</image>
			</view>
			<columnSwitch ref="columnSwitch" :list="cargoApplyList"></columnSwitch>
		</view>
	</view>
</template>

<script>
	import {
		listCarousel,
		listShortcut,
		listRecommend,
	} from '@/api/decorate/index'
	import {
		pageLeaflet
	} from '@/api/pet/leaflet/index'
	import {
		getTypeList,
		getList
	} from "@/api/news/index.js"
	import {
		getCargoApply
	} from '@/api/pet/index/home'
	import util from '@/common/util'
	import shortcutBox from '@/pages/pet/components/shortcut-box'
	import homePet from '@/pages/pet/components/home-pet'
	import columnSwitch from '@/pages/pet/components/column-switch'
	export default {
		components: {
			shortcutBox,
			homePet,
			columnSwitch
		},
		data() {
			return {
				scrollTop: 0,
				CustomBar: this.CustomBar,
				url: '',
				tabUrl: 'https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/tab-1.png',
				swiperIndex: 0,
				tabList: [],
				carousels: [], //轮播
				recommendPet: [], //明星推荐
				showInfor: undefined, // 判断是否有宠物
				cargoApplyList: [], //认证记录
			}
		},
		created() {

		},
		methods: {
			init() {
				this.listCarousel()
				this.listShortcut()
				this.listRecommend()
				this.getPageLeaflet()
				this.getCargoApply()
				uni.stopPullDownRefresh()
			},
			onScroll(e) {
				this.scrollTop = e.scrollTop
			},
			changeSwiper(e) {
				this.swiperIndex = e.detail.current
			},
			// 获取轮播图
			listCarousel() {
				listCarousel({
					space: 'INDEX',
				}).then(res => {
					this.carousels = res;
				})
			},
			// 获取金刚区
			listShortcut() {
				listShortcut({
					space: 'INDEX',
				}).then(res => {
					this.tabList = res
				})
			},
			// 推荐列表
			listRecommend() {
				listRecommend({

				}).then(res => {
					this.recommendList = res || []
					this.showInfor = this.recommendList.find(item => item.module == 'INFOR')

				})
			},
			// pageLeaflet 明星推荐
			getPageLeaflet() {
				pageLeaflet({
					page: 1,
					limit: 3,
					recommend: 1
				}).then(res => {
					this.recommendPet = res.rows
				})
			},
			//认证记录 
			getCargoApply() {
				getCargoApply().then(res => {
					this.cargoApplyList = res
				})
			},
			toPage(url) {
				if (url.includes('/pages/product/index/index') || url.includes('/pages/pet/auth/index')) {
					let currentArr = url.split('?')
					var paramObj = {}
					var params = currentArr[1].split('&')
					for (var i in params) {
						var param = params[i].split('=')
						paramObj[param[0]] = param[1]
					}
					uni.$emit('handlePath', currentArr[0], paramObj)
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.head-left {
		width: 118rpx;
		height: 38rpx;
		margin-left: 24rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.bg {
		width: 100%;
		height: 496rpx;
		background: linear-gradient(180deg, var(--primaryBg) 0%, rgba(255, 227, 89, 0) 100%);
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.box {
		width: 100%;

		.swiper-box {
			width: 702rpx;
			height: 240rpx;
			margin: 24rpx auto 0;
			position: relative;

			.swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;

					.swiper-view {
						width: 100%;
						height: 100%;

						image {
							width: 100%;
							height: 100%;

						}
					}
				}
			}

			.swiper-indicator {
				position: absolute;
				right: 12rpx;
				bottom: 12rpx;
				background: rgba(0, 0, 0, .7);
				border-radius: 17rpx;
				width: 68rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 34rpx;
				text-align: center;
			}
		}

		.pet-title {
			padding-left: 24rpx;
			display: flex;
			align-items: center;
			margin-bottom: 34rpx;
			margin-top: 58rpx;

			view {
				width: 8rpx;
				height: 32rpx;
				background: var(--primaryBg);
				border-radius: 9rpx;
			}

			image {
				width: 134rpx;
				height: 32rpx;
				margin-left: 10rpx;
			}
		}

		.authentication {
			width: 718rpx;
			background: #FFFFFF;
			border-radius: 14rpx;
			margin: 0 auto 20rpx;
			overflow: hidden;

			.authentication-img {
				width: 100%;
				height: 320rpx;
				position: relative;

				.host {
					width: 100%;
					height: 100%;
					background: var(--primaryBg);
				}

				.icon {
					position: absolute;
					top: 20rpx;
					left: 20rpx;
					width: 154rpx;
					height: 36rpx;
				}
			}

			.authentication-title {
				width: 100%;
				padding: 24rpx;
				box-sizing: border-box;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 34rpx;
				color: var(--h1Color);
				line-height: 48rpx;
			}
		}
	}
</style>